﻿body {
    font-family: Arial;
    font-size: smaller;
    height: 100vh; 
    width: 100vw;
    margin: 0;
}

#right {
    float: right;
    height: 100vh;
    width: 30vw;
    overflow: auto;
}

#viewport {
    float: left;
    height: 100vh;
    width: 70vw;
}

.node {
    stroke: #fff;
    stroke-opacity: .75;
    stroke-width: 2px;
    cursor: pointer;
}

.link {
    stroke: #999;
    stroke-opacity: .6;
    cursor: pointer;
}

.hint {
    color: blue;
    font-family: Arial;
    font-size: smaller;
    pointer-events: none;
}

.tooltip {
    color: blue;
    background: ghostwhite;
    width: auto;
    height: auto;
    position: absolute;
    font-family: Arial;
    pointer-events: none;
    border: darkgrey solid thin;
    padding: 5px;
    padding-right: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
}

.tooltiphead {
    font-size: medium;
}

.tooltipbody {
     font-size: small;
}

#imgAssembly {
    margin-left: 4px;
    margin-top: 4px;
    margin-bottom: -2px;   
}